<script setup>
    import { ref, toRefs } from "vue";
    import { Cell, CellGroup } from 'vant';
    import { store, loginOpen } from '../js/store.js';
	import vancheckbox from "../components/checkbox.vue";//组件插槽

    defineProps({
        title: String,
    });

    function init() {
        console.log('init');
        if(!loginOpen.getUser()){
            loginOpen.popup = true;
        }
    }
    //组件暴露自己的属性
    defineExpose({
        init,
    });

    //组件插槽TEST
	const checked = ref(true);
    function onchecked() {
        console.log('checked', checked.value);
    }
    function oncomp() {
        // location.hash = '#/me/sub1';
        location.hash = '#/sub1';
    }

	const checkedShow = ref(false);
    store.pageRouter.route("sub1", function () {
		checkedShow.value = true;
	},function () {
		checkedShow.value = false;
	});
    store.pageRouter.routes['sub1'].sub = true;//打开sub1，已打开的页面不退出
</script>

<template>
    <van-nav-bar :title="title" />
    <van-cell-group>
        <!-- <van-cell title="开发中..." value="" is-link url="#/" /> -->
        <van-cell title="用户名" :value="loginOpen.user.name||'未登录！'" />
        <van-cell title="角色" :value="loginOpen.user.role" />
        <van-cell title="电话" :value="loginOpen.user.phone" />
        <van-cell title="邮箱" :value="loginOpen.user.email" />
        <van-cell title="插槽test">
            <template #value>
                <button @click="oncomp">组件插槽</button>
                <!-- 自定义组件插槽 -->
                <vancheckbox v-model="checked" @click="onchecked" v-if="checkedShow"><template v-slot:aaa="{ text }">复选框 {{text}}</template></vancheckbox>
            </template>
        </van-cell>
    </van-cell-group>

</template>

<style scoped>

</style>